<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #bar {
            border-radius: 5px;
            width: 535px;
            padding: 10px;
            position: relative;
            float: left;
            margin-left: 20px;
        }

        #app {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
        }

        .gard {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 5px;
            float: left;
        }

        .list {

            width: 580px;
            height: 50px;
            border-bottom: 1px solid #ccc;
            padding-left: 20px;
            padding: 20px;
            margin-left: 10px;

        }

        button {
            width: 105px;
            height: 35px;
            background-color: #ccc;
            border-radius: 5px;
            border: none
        }

        button:hover {
            cursor: pointer;
        }

        input {
            width: 250px;
            padding: 15px 25px;
        }
    </style>
</head>

<body>

    <!-- 导航子组件 -->
    <template id="navTemp">
        <div id="bar">
            <button @click="change(true)">列表视图</button>
            <button @click="change(false)">网格视图</button>
            <input type="text" v-model="searchString" placeholder="请输入搜索内容">
        </div>
    </template>
    <script>
        const navTemp = {
            template: "#navTemp",
            data() {
                return {
                    searchString: ''
                }
            },
            watch: {
                searchString(newVal, oldVal) {
                    console.log(newVal);
                    this.$emit("change-search-string", newVal)
                }
            },
            methods: {
                change(flag) {
                    this.$emit("change-list", flag)
                }
            }
        }
        Vue.component('nav-temp', navTemp)
    </script>


    <!-- 列表子组件 -->
    <template id="listTemp">
        <div style="margin:20px">
            <div v-for="item in list" class="list">
                {{item.name}}
            </div>
        </div>
    </template>
    <script>
        const listTemp = {
            template: "#listTemp",
            props: {
                list: {
                    type: Array
                }
            }
        }
        Vue.component('list-temp', listTemp)
    </script>

    <!-- 网格子组件 -->
    <template id="gardTemp">
        <div>
            <div v-for="item in list" class="gard">
                {{item.name}}
            </div>
        </div>
    </template>
    <script>
        const gardTemp = {
            template: "#gardTemp",
            props: {
                list: {
                    type: Array
                }
            }
        }
        Vue.component('gard-temp', gardTemp)
    </script>



    <!-- 父组件(实例) -->
    <div id='app'>
        <nav-temp @change-list="fatherTemp" @change-search-string="fatherData"></nav-temp>
        <list-temp :list="searchList" v-show="flag"></list-temp>
        <gard-temp :list="searchList" v-show="!flag"></gard-temp>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    name: "test3.txt", id: 3
                }, {
                    name: "test2.txt", id: 2
                },
                {
                    name: "test1.txt", id: 1
                },
                {
                    name: "test4.txt", id: 4
                },
                {
                    name: "testtext5.txt", id: 5
                }
                ],
                flag: true,
                searchString: ''
            },
            methods: {
                fatherTemp(e) {
                    this.flag = e
                },
                fatherData(e) {
                    this.searchString = e
                },
                created() {
                    this.sortArticles()
                },
                // 数据列表冒泡排序
                sortArticles() {
                    let arr = this.list
                    let temp;
                    for (var i = 0; i < arr.length - 1; i++) {
                        for (var j = 0; j < arr.length - 1; j++) {
                            if (arr[j].id > arr[j + 1].id) {
                                temp = arr[j].id;
                                arr[j].id = arr[j + 1].id;
                                arr[j + 1].id = temp;
                            }
                        }
                    }

                },
            },
            computed: {
                searchList() {
                    return this.list.filter(item => item.name.includes(this.searchString))
                }
            },
            created() {
                this.sortArticles()
            },


        })
    </script>
</body>

</html>